<script setup>
import { onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import {
  getHouseShanty,
  getHouseAddLiftCircumstance,
  getHouseParliamentaryMeeting
} from '../api.js'
import DotsTabs from '@/views/new-screen/components/dotsTabs.vue'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const tentZoneChartBarRef = ref(null)
const getBarChartOption = (data) => {
  return {
    grid: {
      top: '20%',
      left: '4%',
      bottom: '16%',
      right: '4%',
    },
    legend: {
      show: false,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      // width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      data: data.xAxis,
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        rotate: -45,
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        show: false,
        name: '任务数',
        type: 'value',
        position: 'left',
        axisLabel: {
          show: false,
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: '任务数',
        type: 'bar',
        barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: true, // 显示标签
          color: '#fff',
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00D1FE' // 0% 处的颜色
            }, {
                offset: 1, color: '#034D82' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        data: data['任务数'],
      },
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}
const updateDataTentZone = (data) => {
  tentZoneChartBarRef.value?.updateOption(getBarChartOption({
    xAxis: data.cityNames,
    "任务数": data.value
  }))
}

const tentZoneOverviewData = ref([
  {
    name: '蓬户区总数',
    value: 0,
    unit: '个'
  },
  {
    name: '涉及用户总数',
    value: 0,
    unit: '人'
  },
  {
    name: '总建筑面积',
    value: 0,
    unit: '万平'
  },
  {
    name: '总用地面积',
    value: 0,
    unit: '万平'
  },
])
const updateDataOverview = (data) => {
  Object.entries(data).forEach(([name, value]) => {
    const one = tentZoneOverviewData.value.find((item) => item.name === name)
    if (one) { 
      one.value = value
    }
  })
}


const elevatorCompleteTotal = ref(0)
const elevatorChartBarRef = ref(null)
const updateDataElevatar = (data) => {
  elevatorCompleteTotal.value = data['完成总量']
  elevatorChartBarRef.value?.updateOption(getBarChartOption({
    xAxis: data.cityNames,
    "任务数": data.value
  }))
}


const oldFriendsCouncilOverviewData = ref([
  {
    title: '议事会总数',
    value: 0,
    unit: '个'
  },
  {
    title: '成员总数',
    value: 0,
    unit: '人'
  },
  {
    title: '党员总数',
    value: 0,
    unit: '人'
  },
])

const updateParliamentaryMeetingOverview = (data) => {
  Object.entries(data).forEach(([name, value]) => {
    const one = oldFriendsCouncilOverviewData.value.find((item) => item.title === name)
    if (one) { 
      one.value = value
    }
  })

  tableData.value = data['成员明细']
}

const activeName = ref('议事会成员信息')
const tabList = ref([{ name: '议事会成员信息' }])
const showMemberList = ref(false)
const tableData = ref([
  { location: '-', members: 0, partyMembers: 0, partyRatio: '0%' },
])

const reqData = () => {
  Promise.all([
    getHouseShanty(),
    getHouseAddLiftCircumstance(),
    getHouseParliamentaryMeeting()
  ])
  .then(([shanty, lift, parliamentaryMeeting]) => {
    if (shanty.success) {
      updateDataOverview(shanty.data)
      updateDataTentZone(shanty.data)
    }
    if (lift.success) {
      updateDataElevatar(lift.data)
    }
    if (parliamentaryMeeting.success) {
      updateParliamentaryMeetingOverview(parliamentaryMeeting.data)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="棚户区" class="township-card">
      <div class="section">
        <div class="section-title">＞ 全市棚户区总数</div>
        <div class="overview-wrap">
          <div class="overview-box" v-for="item in tentZoneOverviewData" :key="item.name">
            <div class="bg"></div>
            <div class="overview-value">{{ item.value }}
              <span class="overview-unit">{{ item.unit }}</span>
            </div>
            <div class="overview-name">{{ item.name }}</div>
          </div>
        </div>
        
        <div class="section-title">＞ 棚户区分布</div>
        <div class="chart">
          <draw-echarts
            ref="tentZoneChartBarRef"
            width="420"
            height="180"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>

    <card name="加装电梯完成情况" class="township-card">
      <div class="section">
        <div class="total-wrap">
          <span>完成总量</span>
          <span class="value">
            {{ elevatorCompleteTotal }}
            <span class="unit">个</span>
          </span>
        </div>
        <div class="chart">
          <draw-echarts
            ref="elevatorChartBarRef"
            width="420"
            height="180"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
    </card>


    <card name="老友议事会" class="elevator-card">
      <div class="old-friends-council overview-wrap">
        <div class="overview-box" v-for="(item, i) in oldFriendsCouncilOverviewData" :key="item.name">
          <div>
            <span class="overview-value">{{ item.value }}</span>
            <span class="overview-unit">{{ item.unit }}</span>
          </div>
          <div class="overview-title">{{ item.title }}</div>
        </div>
      </div>

      <div class="btn-member-list" @click="showMemberList = true">
        议事会成员信息名单➔
      </div>
    </card>
    <div class="member-list-wrap" v-if="showMemberList">
      <DotsTabs :tab-list="tabList" v-model:activeName="activeName" />
      <div class="table-wrap">
        <div class="tr th">
          <div class="location td">城区</div>
          <div class="member td">成员数</div>
          <div class="party-member td">党员数</div>
          <div class="party-member-rate td">党员占比</div>
        </div>
        <el-scrollbar style="height: 841px;">
          <div class="tr" v-for="(item, index) in tableData" :key="index">
            <div class="location td">
              <el-tooltip :content="item.location"  placement="top" effect="light">
                {{ item.location }}
              </el-tooltip>
            </div>
            <div class="member td">
              <el-tooltip :content="String(item.members)"  placement="top" effect="light">
                {{ item.members }}
              </el-tooltip>
            </div>
            <div class="party-member td">
              <el-tooltip :content="String(item.partyMembers)"  placement="top" effect="light">
                {{ item.partyMembers }}
              </el-tooltip>
            </div>
            <div class="party-member-rate td">
              <el-tooltip :content="String(item.partyRatio)"  placement="top" effect="light">
                {{ item.partyRatio }}
              </el-tooltip>
            </div>
          </div>
          <div class="no-data" v-if="!tableData.length">暂无数据</div>
        </el-scrollbar>
      </div>

      <div class="btn-close" @click="showMemberList = false">✖</div>
  </div>
  </div>
</template>

<style scoped lang="scss">
.right {
  position: relative;
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }
  .mt-2 {
    margin-top: 16px;
  }
  .section-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
  }
  
  .overview-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .overview-box {
      position: relative;
      margin-bottom: 5px;
      padding-left: 16px;
      width: 43%;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: left;
      flex-direction: column;
      gap: 5px;
    
      text-align: left;
      color: #eee;

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #044e79 0%, #063254 50%, #081a3421 100%);
        border: solid 1px;
        border-image: linear-gradient(90deg, #00EDF4, #08173121) 1;
        border-right: none;
        transform: skewX(-18deg);
      }
      .overview-name {
        position: relative;
      }
      .overview-value {
        position: relative;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
      }
      .overview-unit {
        color: #bbdbf6;
        font-size: 14px;
        font-weight: normal;
      }
    }
  }

  .total-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding-left: 20px;
    padding-right: 6px;
    color: #B9D9F4;
    background: linear-gradient(to right, #1F3157, #1F315700);
    .value {
      font-weight: bold;
      font-size: 20px;
      color: #00C2FF;
      .unit {
        font-size: 14px;
        font-weight: normal;
        color: #bbdbf6;
        margin-left: 4px;
      }
    }
  }

  .old-friends-council.overview-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .overview-box {
      margin-bottom: 10px;
      width: 30%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background-image: url(/src/assets/imgs/house_rent_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .overview-value {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
      .overview-unit {
        font-size: 14px;
        color: #aaa;
      }
      .overview-title {
        margin-top: 4px;
        font-size: 14px;
        color: #bbb;
      }
    }
  }

  .btn-member-list {
    margin-top: 16px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 40px;
    color: #B9D9F4;
    cursor: pointer;
    background: #0B1934;
    box-shadow: 0 0 5px 12px #0A2D4C inset;
    border: solid 2px;
    border-image: line-gradient(to right, #046A98, #046A98);
  }

  .my-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbdbf6;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;

    .dots {
      display: flex;
      align-items: center;
      gap: 5px;
      i {
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 3px;
        background: #bbdbf6;
      }
    }

    .tabs {
      display: flex;
    }

    .tab-item {
      position: relative;
      cursor: pointer;
      padding: 0 6px;
      margin: 0 6px;
      font-size: 13px;
    }
    .tab-item::before {
      content: '';
      position: absolute;
      width: 2px;
      height: 0.7em;
      right: -7px;
      top: 12px;
      background-color: #ffffff;
    }
    .tab-item:last-child::before {
      display: none;
    }
    .tab-item.on {
      color: #f8ea9a;
    }
    .tab-item.on::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,rgba(248, 234, 154, 0.01), rgba(248, 234, 154, 0.4), rgba(248, 234, 154, 0.01));
    }
  }
}
.member-list-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: #0B1934;
  background: linear-gradient(to right, #0A1630, #132343);

  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    
    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }

  .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    padding: 5px 10px;
    background-size: cover;
    cursor: pointer;
  }
}
</style>
